<template>
  <div class="test">
    <el-button @click="scroll2('.s1')">点我滚动到指定位置</el-button>
    <el-divider>图片组件测试开始</el-divider>

    <el-divider>图片组件测试结束</el-divider>

    <el-button @click="getCc">请求</el-button>
    <el-button @click="getfk">凡科请求</el-button>
    <!--<amap :default-value="postForm.detailedAddress" @getPosition="getPosition"/>-->

    <!--<div class="triangle"></div>-->

    <!--<div class="find-div-body"></div>-->

    <!--<div style="width:100%;height: 1500px;"></div>-->

    <!--<div class="s1">在这在这！！！</div>-->

    <!--<div style="width:100%;height: 1500px;"></div>-->

    <!--<el-button @click="scroll2('.s1')">点我滚动到指定位置</el-button>-->

    <!--<div style="width:100%;height: 1500px;"></div>-->

    <!--<el-image v-for="item in num" :src="`https://dpic.tiankong.com/c6/cu/QJ8331107431.jpg?x-oss-process=style/${item}ws`" alt=""></el-image>-->
    <!--<el-image v-for="item in num" :src="`https://dpic.tiankong.com/c6/cu/QJ8331107431.jpg?x-oss-process=style/${item}h`" :key="item" alt=""></el-image>-->
    <!--<el-image v-for="item in num" :src="`https://static3.depositphotos.com/thumbs/1004877/image/208/2085956/api_thumb_${item}.jpg`" :key="item" alt=""></el-image>-->
  </div>
</template>

<script>
import { getC, getfank } from "@/api/test";
// import Amap from '@/components/amap/index.vue';

export default {
  name: "test",
  components: {
    // Amap,
  },
  data() {
    return {
      postForm: {
        detailedAddress: "",
        longitude: "",
        latitude: ""
      },
      url: "https://sb20185892.mallapp.fkw.com/ajax/materialLibrary_h.jsp?_TOKEN=6203d1ed68b53749588f353bb0e298dd&cmd=getFodders&categoryId=1&topicId=104&currentPage=0&limit=100&normalSize=20&smallSize=28&littleSize=77",
      apiKey: {
        removeAkey: "b09e8ccd7923f2c8f1166aab3302e2f0",
        addAkey: "36f41d7f1c16ec2ba452901c5fc44f1c",
        editAkey: "678550abf68b014005c7c8840b9de895",
        delAkey: "01cda45d449a9e9c274e79f3dc3b1ffb"
      },
      imgArr: [],
      num: []
    };
  },
  created() {
    this.getCc();
    console.log(this._Pinyin.getJP("语文Y123c看看"));

    // for (let i = 1000; i < 2000; i += 1) {
    //   this.num.push(i);
    // }

    // function ggg(c1, c2, page,cid,topicId) {
    //   var r = {
    //     cmd: "getFodders",
    //     currentPage: page || 0,
    //     limit: 100,
    //     categoryId: cid,
    //     topicId: topicId,
    //     normalSize: 50,
    //     smallSize: 28,
    //     littleSize: 77,
    //   }
    //   $.ajax(
    //     {
    //       url: "https://sb20185892.mallapp.fkw.com/ajax/materialLibrary_h.jsp",
    //       data: r,
    //       success: function (result) {
    //         var res = JSON.parse(result).data.list;
    //         var imgs = res.map((v) => {
    //           return {
    //             w: v.materialWidth,
    //             h: v.materialHeight,
    //             name: v.materialName,
    //             url: "https:" + v.materialPath,
    //           }
    //         });
    //         var dd = {
    //           code1: c1,
    //           code2: c2,
    //           imgs: imgs
    //         };
    //         var data = {
    //           akey:"3b1c496efba1e534732459d1c7bcf0f3",
    //           imgs_json:JSON.stringify(dd)
    //         };
    //         $.ajax({
    //           url:"https://apis.sbml.x2oo.com/___mladmin.php",
    //           type:"post",
    //           contentType: 'application/json',
    //           data:JSON.stringify(data),
    //           success:function(rrr){
    //             console.log(rrr);
    //           }
    //         })
    //       }
    //     });
    // }
  },
  methods: {
    scroll2(target) {
      if (!target) {
        return
      }
      const app = document.querySelector(".test"); // 可滚动的那个容器标签
      const scrollPart = document.querySelector(target); // 目标节点class
      const top = scrollPart.getBoundingClientRect().top - 60; // 设置自己滚动的高度
      const pageY = app.scrollTop; // 获取滚动条的位置
      const endPosition = top + pageY;

      const startTime = +new Date(); // +new Date() 返回毫秒时间戳
      const duration = 500; // ms 滚动时长

      function run() {
        const time = +new Date() - startTime;

        app.scrollTo(0, pageY + top * (time / duration));
        run.timer = window.requestAnimationFrame(run);

        if (time >= duration) {
          app.scrollTo(0, endPosition);
          cancelAnimationFrame(run.timer);
        }
      }
      window.requestAnimationFrame(run);
    },
    getfk() {
      const sendData = {
        _TOKEN: "6203d1ed68b53749588f353bb0e298dd",
        cmd: "getFodders",
        categoryId: 1,
        topicId: 104,
        currentPage: 0,
        limit: 100,
        normalSize: 20,
        smallSize: 28,
        littleSize: 77
      }
      getfank(sendData, this.url).then((res) => {
        console.log(res)
      })
    },
    async getCc() {
      const res = await getC();
      console.log(res);
      if (res.rcode === "2") this.imgArr.push(...res.imgurl_list);
    },
    // 获取地址信息
    getPosition({
      address, lat, lng, name
    }) {
      console.log(name);
      this.postForm.detailedAddress = address;
      this.postForm.longitude = String(lng);
      this.postForm.latitude = String(lat);
    }
  }
};
</script>

<style scoped>
  .test{
    height: 100%;
    overflow: auto;
  }
  /**
   * 带边框的三角形其实是通过两个三角形叠加形成的
   */
  .triangle {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f60;
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -10px;
  }
  .triangle:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #000;
    margin-left: -10px;
    z-index: -1;
    filter: blur(2px);
  }

  .find-div-body{
    position: relative;
    /*top:30px;*/
    left: 100px;
    width:80px;
    height:80px;
    margin-bottom: 30px;
    padding:8px;
    border: #1916cc solid 1px;
    border-radius: 3px;
  }
  .find-div-body:before{
    box-sizing: content-box;
    width: 0px;
    height: 0px;
    position: absolute;
    bottom: -16px;;
    left: 32px;
    padding:0;
    border-right: 8px solid transparent;
    border-top:8px solid #FFFFFF;
    border-bottom: 8px solid transparent;
    border-left:8px solid transparent;
    display: block;
    content:'';
    z-index: 12;
  }
  .find-div-body:after{
    box-sizing: content-box;
    width: 0px;
    height: 0px;
    position: absolute;
    bottom: -18px;
    left: 31px;
    padding:0;
    border-right: 9px solid transparent;
    border-top:9px solid #1916cc;
    border-bottom:9px solid transparent;
    border-left:9px solid transparent;
    display: block;
    content:'';
    z-index:10
  }
</style>
